<template>
  <el-aside width="200px" class="aside">
    <div class="logo" style="font-family: '庞门正道标题体', sans-serif;">慧心医问</div>
    <div class="aside-sccroller">
      <el-menu
        background-color="rgb(48,65,86)"
        text-color="#fff"
        style="border: 0"
      >
        <el-menu-item index="1">
          <router-link to="/userinfo">用户信息管理</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link to="/qa">问答记录管理</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/time">登录时间管理</router-link>
        </el-menu-item>
        <el-menu-item index="4">
          <router-link to="/feedback">反馈信息管理</router-link>
        </el-menu-item>
      </el-menu>
    </div>
  </el-aside>
</template>

<script>
export default {
  name: "aside",
};
</script>

<style lang="scss">
#app {
  height: 100%;
  width: 100%;
}

.app .router-link-active {
  text-decoration: none;
  color: #ffd04b;
}
.app-container {
  width: 100%;
  height: 100%;
}
.layout-container {
  width: 100%;
  height: 100%;
  .aside {
    height: 100%;
    background-color: rgb(48, 65, 86);
  }
  .main-container {
    height: 100%;
  }
}
a {
  text-decoration: none;
  color: white;
}
.aside-title {
  color: aliceblue;
}
.el-menu {
  border: 0;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.logo-container {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  margin-bottom: 30px;  
  margin-top: 30px; 
}  

@font-face {
  font-family: '庞门正道标题体';
  src: url('src/views/庞门正道标题体.ttf') format('truetype');
}

.logo {
  margin-top: 10px; 
  font-size: 26px;
  font-weight: normal;
  color: #4095E5;
  font-family: '庞门正道标题体', sans-serif; /* Apply the font family */
  font-style: italic;
}  

/* .el-icon-plus:before {
  content: "\e6d9";
  position: relative;
  top: 70px;
} */
.aside-sccroller {
  width: 100%;
  max-width: 200px;
  background-color: rgb(48,65,86);
  color: #fff;
  padding: 0;
  border: 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1000;

  .el-menu {
    border: 0;
    border-radius: 0;

    .el-menu-item {
      border-bottom: 1px solid #656e9a;
      padding: 10px 0;
      transition: background-color 0.3s;

      &:hover,
      &.is-active {
        background-color: #1c2f54b6;
      }

      .router-link-exact-active {
        color: #409eff;
      }

      a {
        color: #fff;
        display: block;
        width: 100%;
        padding: 0 10px;
        line-height: 30px;
        white-space: nowrap;
        text-decoration: none;
        font-size: 14px;
      }
    }
  }
}
</style> 